<template>

  <div class="app-container">

    <h2 style="text-align: center;">发布新比赛</h2>

    <el-steps :active="3" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写比赛基本信息"/>
      <el-step title="选择比赛开设项目"/>
      <el-step title="最终发布"/>
    </el-steps>

    <div class="ccInfo">
      <img :src="compInfo.schedule">
      <div class="main">
        <p><span>比赛名 : {{compInfo.name}}</span></p>
        <p>比赛时间 : {{compInfo.time}}</p>
        <p>比赛地点 : {{compInfo.location}}</p>
        <p>最大人数 : {{compInfo.maxNum}}</p>
        <p>创建时间 : {{compInfo.gmtCreate}}</p>
        <p>最后修改时间 : {{compInfo.gmtModified}}</p>
      </div>
    </div>    

    <p><span>开设项目</span></p>

    <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
    prop="eid"
    label="项目"
    width="180">
    </el-table-column>
    <el-table-column
    prop="sid"
    label="赛制"
    width="180">
    </el-table-column>
    <el-table-column
    prop="round"
    label="轮次">
    </el-table-column>
</el-table>

    <el-form label-width="120px" class="qwer">
      <el-form-item>
        <el-button @click="previous">返回修改</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="publish">发布比赛</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import comp from '@/api/comp/comp'
import open from '@/api/comp/open'
import event from '@/api/comp/event'
import style from '@/api/comp/style'
export default {
  data() {
    return {
      saveBtnDisabled: false, // 保存按钮是否禁用
      compId:undefined,
      compInfo:{},
      openList:'',
      tableData:[]
    }
  },

  created() {
    this.init()
  },

  methods: {

    previous() {
      this.$router.push({ path: "/comp/add2/" + this.compId });
    },

    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        this.compId = id
      }
      this.getInfo()
      this.getOpenList()
    },

    getInfo() {
        comp.getCompById(this.compId).
        then((response) => {
            this.compInfo = response.data.comp
        })
        .catch((error) => {
            console.log(error)
        });
        open.getOpenList(this.compId).
        then((response) => {

        })
        .catch((error) => {
            console.log(error)
        });
    },
    getOpenList() {
      open.getOpenList(this.compId).
      then((response) => {
        const openList = response.data.openlist
        for(let i = 0; i < openList.length; i++) {
          event.getEventById(openList[i].eid).
          then ((response) => {
            openList[i].eid = response.data.event.name
          })
          style.getStyleById(openList[i].sid).
          then ((response) => {
            openList[i].sid = response.data.style.name
          })
        }
        this.tableData = openList
        console.log(openList);
      })
      .catch((error) => {
        console.log(error)
      });
    },

    publish() {
      this.$message({
        type: "success",
        message: "发布成功!",
      });
      this.$router.push({ path: "/comp/list/"});
    }
    

  }
}
</script>
<style scoped>
.qwer {
    padding-top: 30px;
}
.ccInfo {
    background: #f5f5f5;
    padding: 20px;
    overflow: hidden;
    border: 1px dashed #DDD;
    margin-bottom: 40px;
    position: relative;
}
.ccInfo img {
    background: #d6d6d6;
    width: 500px;
    height: 278px;
    display: block;
    float: left;
    border: none;
}
.ccInfo .main {
    margin-left: 520px;
}

.ccInfo .main h2 {
    font-size: 28px;
    margin-bottom: 30px;
    line-height: 1;
    font-weight: normal;
}
.ccInfo .main p {
    margin-bottom: 10px;
    word-wrap: break-word;
    line-height: 24px;
    max-height: 48px;
    overflow: hidden;
}

.ccInfo .main p {
    margin-bottom: 10px;
    word-wrap: break-word;
    line-height: 24px;
    max-height: 48px;
    overflow: hidden;
}
.ccInfo .main h3 {
    left: 540px;
    bottom: 20px;
    line-height: 1;
    font-size: 28px;
    color: #d32f24;
    font-weight: normal;
    position: absolute;
}
</style>